<script setup lang="ts">
import { ref, defineExpose, defineEmits, nextTick, defineProps } from "vue"
import mino from "@/data/mino.json"

const props = defineProps(['minoType', 'size'])

const tColor = mino.find(i => i.type == 'T').color
const iColor = mino.find(i => i.type == 'I').color
const lColor = mino.find(i => i.type == 'L').color
const jColor = mino.find(i => i.type == 'J').color
const sColor = mino.find(i => i.type == 'S').color
const zColor = mino.find(i => i.type == 'Z').color
const oColor = mino.find(i => i.type == 'O').color

</script>

<template>
<div class="viewBlock h-full w-full flex items-center justify-center">

    <div v-if="props.minoType == 'T'" class="item">
        <div class="flex items-center">
            <div class="block n aspect-square"></div>
            <div class="block t aspect-square"></div>
            <div class="block n aspect-square"></div>
        </div>
        <div class="flex items-center">
            <div class="block t aspect-square"></div>
            <div class="block t aspect-square"></div>
            <div class="block t aspect-square"></div>
        </div>
    </div>

    <div v-else-if="props.minoType == 'I'" class="item">
        <div class="flex items-center">
            <div class="block i aspect-square"></div>
            <div class="block i aspect-square"></div>
            <div class="block i aspect-square"></div>
            <div class="block i aspect-square"></div>
        </div>
    </div>

    <div v-else-if="props.minoType == 'L'" class="item">
        <div class="flex items-center">
            <div class="block l aspect-square"></div>
            <div class="block n aspect-square"></div>
            <div class="block n aspect-square"></div>
        </div>
        <div class="flex items-center">
            <div class="block l aspect-square"></div>
            <div class="block l aspect-square"></div>
            <div class="block l aspect-square"></div>
        </div>
    </div>

    <div v-else-if="props.minoType == 'J'" class="item">
        <div class="flex items-center">
            <div class="block n aspect-square"></div>
            <div class="block n aspect-square"></div>
            <div class="block j aspect-square"></div>
        </div>
        <div class="flex items-center">
            <div class="block j aspect-square"></div>
            <div class="block j aspect-square"></div>
            <div class="block j aspect-square"></div>
        </div>
    </div>

    <div v-else-if="props.minoType == 'S'" class="item">
        <div class="flex items-center">
            <div class="block n aspect-square"></div>
            <div class="block s aspect-square"></div>
            <div class="block s aspect-square"></div>
        </div>
        <div class="flex items-center">
            <div class="block s aspect-square"></div>
            <div class="block s aspect-square"></div>
            <div class="block n aspect-square"></div>
        </div>
    </div>

    <div v-else-if="props.minoType == 'Z'" class="item">
        <div class="flex items-center">
            <div class="block z aspect-square"></div>
            <div class="block z aspect-square"></div>
            <div class="block n aspect-square"></div>
        </div>
        <div class="flex items-center">
            <div class="block n aspect-square"></div>
            <div class="block z aspect-square"></div>
            <div class="block z aspect-square"></div>
        </div>
    </div>

    <div v-else-if="props.minoType == 'O'" class="item">
        <div class="flex items-center">
            <div class="block o aspect-square"></div>
            <div class="block o aspect-square"></div>
        </div>
        <div class="flex items-center">
            <div class="block o aspect-square"></div>
            <div class="block o aspect-square"></div>
        </div>
    </div>

</div>
</template>

<style lang="scss" scoped>
.viewBlock {
    .block {
        border: 1px solid #000;
        border-radius: 0.25rem;
        width: v-bind('props.size + "px"');
        height: v-bind('props.size + "px"');
        position: relative;
        // 背光
        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            z-index: -1;
            filter: blur(4vmin);
            opacity: .6;
        }
    }
    .n {
        border: none;
    }
    .t { background: v-bind(tColor); }
    .i { background: v-bind(iColor); }
    .l { background: v-bind(lColor); }
    .j { background: v-bind(jColor); }
    .s { background: v-bind(sColor); }
    .z { background: v-bind(zColor); }
    .o { background: v-bind(oColor); }
}
</style>
